<template>
  <div class="product-details">
    <!-- 商品基本信息 -->
    <div class="sku-info">
      <img :src="skuInfo.skuDefaultImg" alt="商品图片" class="product-image" />
      <h2>{{ skuInfo.skuName }}</h2>
      <p class="sku-subtitle">{{ skuInfo.skuSubtitle }}</p>
      <p class="sku-title">{{ skuInfo.skuTitle }}</p>
      <p class="price">价格: ¥{{ skuInfo.price }}</p>
      <p class="sale-count">销量: {{ skuInfo.saleCount }} 件</p>
    </div>

    <!-- 商品图片轮播 -->
    <div class="product-gallery">
      <h3>商品图集</h3>
      <div class="gallery-images">
        <img
          v-for="(image, index) in skuImagesList"
          :key="image.id"
          :src="image.imgUrl"
          :alt="'图集' + (index + 1)"
          class="gallery-image"
        />
      </div>
    </div>

    <!-- 商品描述 -->
    <div class="spu-desc">
      <h3>商品描述</h3>
      <div class="description-images">
        <img
          v-for="(descImg, index) in spuInfoDesc.decript ? spuInfoDesc.decript.split(',') : []"
          :key="index"
          :src="descImg"
          alt="'商品描述图' + (index + 1)"
          class="description-image"
        />
      </div>
    </div>

    <!-- 商品属性 -->
    <div class="product-attributes">
      <h3>商品属性</h3>
      <div v-for="(group, groupIndex) in attrGroupVos" :key="groupIndex" class="attribute-group">
        <h4>{{ group.attrGroupName }}</h4>
        <ul>
          <li
            v-for="(attr, attrIndex) in group.attrVoList"
            :key="attrIndex"
            class="attribute-item"
          >
            {{ attr.attrVoName }}: {{ attr.attrVoValue }}
          </li>
        </ul>
      </div>
    </div>

    <!--    数量-->
    <template>
      <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
    </template>

   <!--    确定按钮-->
    <el-button type="primary" @click="addButton">确定按钮</el-button>
  </div>
</template>

<script>


import {addShoppingCartFunction, listDesc} from "@/api/goods/details";

export default {
  data() {
    return {
      // 计数
      num: 1,
      // 从路由中获取 skuId 参数
      skuId: this.$route.query.skuId,
      // 初始化的数据结构
      skuInfo: {
        skuName: '',
        skuSubtitle: '',
        skuTitle: '',
        skuDefaultImg: '',
        price: 0,
        saleCount: 0,
        brandId: 0
      },
      spuInfoDesc: {
        decript: ''  // 默认为空字符串
      },
      attrGroupVos: [],
      attrVoList: [],
      skuImagesList: [],
      newShoppingCart: {
        // 用户id
        userId: '',
        // 商铺id
        shopsId: '',
        // 商铺名称
        shopsName: '',
        // skuId
        skuId: '',
        // sku商品名称
        skuName: '',
        // sku商品信息
        skuTitle: '',
        // sku商品图片
        skuDefaultImg: '',
        // 属性名称
        attrName: '',
        // 属性列表
        valueSelect: '',
        // 数量
        number: '',
        // 价格
        price: ''

      }
    };
  },
  created() {
    // 在组件创建时获取商品数据
    this.getList();
  },
  methods: {
    // 计数
    handleChange(value) {
      console.log(value);
    },
    /** 查询商品属性列表 */
    getList() {
      // 假设你通过某个 API 请求来获取商品数据
      listDesc(this.skuId).then(response => {
        console.log(response); // 输出响应数据
        // 显示各个部分的数据
        console.log('显示商品的默认图片', response.skuInfo);
        console.log('商品描述部分', response.spuInfoDesc);
        console.log('商品属性', response.attrGroupVos);
        console.log('如果有SKU图片，展示这些图片', response.skuImagesList);
        // 将获取到的数据赋值给组件的 data
        this.skuInfo = response.skuInfo;
        this.spuInfoDesc = response.spuInfoDesc;
        this.attrGroupVos = response.attrGroupVos;
        this.attrVoList = response.attrGroupVos.flatMap(group => group.attrVoList); // 展平属性列表
        this.skuImagesList = response.skuImagesList;
        // 你可以进一步处理这些数据，视需求而定
        console.log('所有商品属性列表', this.attrVoList);
      }).catch(error => {
        console.error('获取商品数据失败:', error);
      });
    },
    /** 按钮 **/
    addButton() {
      // 用户id
      this.newShoppingCart.userId = 1
      // 商铺id
      this.newShoppingCart.shopsId = this.skuInfo.brandId
      // skuId
      this.newShoppingCart.skuId = this.skuInfo.skuId
      // sku商品名称
      this.newShoppingCart.skuName = this.skuInfo.skuName
      // sku商品信息
      this.newShoppingCart.skuTitle = this.skuInfo.skuTitle
      // sku商品图片
      this.newShoppingCart.skuDefaultImg = this.skuInfo.skuDefaultImg
      // 数量
      this.newShoppingCart.number = this.num
      // 价格
      this.newShoppingCart.price = this.skuInfo.price
      console.log('参数',this.newShoppingCart)
      // 添加到购物车
      addShoppingCartFunction(this.newShoppingCart).then(res => {
        console.log('添加到购物车',res)
        alert(res.data)

      })
    }
  }
};
</script>

<style scoped>
.product-details {
  width: 80%;
  margin: 0 auto;
}

.product-image {
  width: 100%;
  max-width: 300px;
}

.gallery-images,
.description-images {
  display: flex;
  flex-wrap: wrap;
}

.gallery-image,
.description-image {
  width: 30%;
  margin: 10px;
}

.attribute-group {
  margin-bottom: 20px;
}

.attribute-item {
  margin: 5px 0;
}
</style>





